<template>
  <el-select
    v-model="nationvalue"
    filterable
    placeholder="请选择民族"
    class="add-nation-input"
    @change="nationChange"
  >
    <el-option
      v-for="item in nationList"
      :key="item.value"
      :label="item.info"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  name: 'NationSelect',
  data() {
    return {
      nationvalue: '',
      nationList: [
        { id: 1, info: '汉族', value: '汉族' },
        { id: 2, info: '壮族', value: '壮族' },
        { id: 3, info: '满族', value: '满族' },
        { id: 4, info: '回族', value: '回族' },
        { id: 5, info: '苗族', value: '苗族' },
        { id: 6, info: '维吾尔族', value: '维吾尔族' },
        { id: 7, info: '土家族', value: '土家族' },
        { id: 8, info: '彝族', value: '彝族' },
        { id: 9, info: '蒙古族', value: 9 },
        { id: 10, info: '藏族', value: '藏族' },
        { id: 11, info: '布依族', value: '布依族' },
        { id: 12, info: '侗族', value: '侗族' },
        { id: 13, info: '瑶族', value: '瑶族' },
        { id: 14, info: '朝鲜族', value: '朝鲜族' },
        { id: 15, info: '白族', value: '白族' },
        { id: 16, info: '哈尼族', value: '哈尼族' },
        { id: 17, info: '哈萨克族', value: '哈萨克族' },
        { id: 18, info: '黎族', value: '黎族' },
        { id: 19, info: '傣族', value: '傣族' },
        { id: 20, info: '畲族', value: '畲族' },
        { id: 21, info: '傈僳族', value: '傈僳族' },
        { id: 22, info: '仡佬族', value: '仡佬族' },
        { id: 23, info: '东乡族', value: '东乡族' },
        { id: 24, info: '高山族', value: '高山族' },
        { id: 25, info: '拉祜族', value: '拉祜族' },
        { id: 26, info: '水族', value: '水族' },
        { id: 27, info: '佤族', value: '佤族' },
        { id: 28, info: '纳西族', value: '纳西族' },
        { id: 29, info: '羌族', value: '羌族' },
        { id: 30, info: '土族', value: '土族' },
        { id: 31, info: '仫佬族', value: '仫佬族' },
        { id: 32, info: '锡伯族', value: '锡伯族' },
        { id: 33, info: '柯尔克孜族', value: '柯尔克孜族' },
        { id: 34, info: '达斡尔族', value: '达斡尔族' },
        { id: 35, info: '景颇族', value: '景颇族' },
        { id: 36, info: '毛南族', value: '毛南族' },
        { id: 37, info: '撒拉族', value: '撒拉族' },
        { id: 38, info: '布朗族', value: '布朗族' },
        { id: 39, info: '塔吉克族', value: '塔吉克族' },
        { id: 40, info: '阿昌族', value: '阿昌族' },
        { id: 41, info: '普米族', value: '普米族' },
        { id: 42, info: '鄂温克族', value: '鄂温克族' },
        { id: 43, info: '怒族', value: '怒族' },
        { id: 44, info: '京族', value: '京族' },
        { id: 45, info: '基诺族', value: '基诺族' },
        { id: 46, info: '德昂族', value: '德昂族' },
        { id: 47, info: '保安族', value: '保安族' },
        { id: 48, info: '俄罗斯族', value: '俄罗斯族' },
        { id: 49, info: '裕固族', value: '裕固族' },
        { id: 50, info: '乌孜别克族', value: '乌孜别克族' },
        { id: 51, info: '门巴族', value: '门巴族' },
        { id: 52, info: '鄂伦春族', value: '鄂伦春族' },
        { id: 53, info: '独龙族', value: '独龙族' },
        { id: 54, info: '塔塔尔族', value: '塔塔尔族' },
        { id: 55, info: '赫哲族', value: '赫哲族' },
        { id: 56, info: '珞巴族', value: '珞巴族' }
      ]
    };
  },
  props: ['nationV'],
  methods: {
    nationChange() {
      this.$emit('nationvalue', this.nationvalue);
    }
  },
  watch: {
    nationV: {
      handler(newValue) {
        if (newValue !== undefined) {
          this.nationvalue = newValue;
        }
      },
      immediate: true
    }
  }
};
</script> 